<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
    <title>统计地图</title>
    <%@ include file="/WEB-INF/component/commonCSS.jsp"%>
    <!--[if lt IE 9]>
        <script src="lib/js/html5shiv.min.js"></script>
        <script src="lib/js/respond.min.js"></script>
    <![endif]-->
</head>
<body class="skin-blue-light sidebar-mini fixed skin-blue-light-frame">

    <section class="content-header">
        <h1>陕西省药品采购情况</h1>
        <ol class="breadcrumb">
            <li><a href="${ctx}/home.jsp"><i class="fa fa-home"></i>首页</a></li>
            <li class="active"><a href="#">统计查询</a></li>
            <li class="active"><a href="#">陕西省药品采购情况</a></li>
        </ol>
    </section>
    
    <section class="content">
        <div class=" box box-success">
            <div class="box-body">
                <div id="shanxiChart" style="width:100%;height:500px;"></div>
            </div>
        </div>
    </section>
    
    <%@ include file="/WEB-INF/component/commonJS.jsp"%>
    
	<script type="text/javascript">
	    var option = {
            title: {
                text: '陕西省药品采购情况'
            },
            tooltip : {
                trigger: 'item',
                formatter: function (params){
                    console.log(params);
                    var tips = "";
                    if (params.data) {
                        tips = params.data.name || "";
                        if (params.data.valueMap) {
                            var map = params.data.valueMap;
                            tips += "<br/>中标企业：" + (map[0] || "0") + "家";
                            tips += "<br/>采购金额：" + (map[1] || "0") + "万元";
                        }
                    }
                    return tips;
                }
            },
            dataRange: {
                min: 0,
                max: 10000,
                color: ['orangered','yellow','lightskyblue'],
                x: 'left',
                y: 'bottom',
                text:['高','低'],           // 文本，默认为数值文本
                calculable : true
            },
            toolbox: {
                show: true,
                orient : 'vertical',
                x: 'right',
                y: 'center',
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            roamController: {
                show: true,
                x: 'right',
                mapTypeControl: {
                    'china': true
                }
            },
            series: [
                {
                    name: '中标企业',
                    type: 'map',
                    mapType: '陕西',
                    selectedMode: 'single',
                    itemStyle: {
                        normal: { label: { show: true } },
                        emphasis: { label: { show: true } }
                    },
                    data: [
                        { name: '西安市', value: Math.round(Math.random() * 1000) },
                        { name: '铜川市', value: Math.round(Math.random() * 1000) },
                        { name: '宝鸡市', value: Math.round(Math.random() * 1000) },
                        { name: '咸阳市', value: Math.round(Math.random() * 1000) },
                        { name: '渭南市', value: Math.round(Math.random() * 1000) },
                        { name: '延安市', value: Math.round(Math.random() * 1000) },
                        { name: '汉中市', value: Math.round(Math.random() * 1000) },
                        { name: '榆林市', value: Math.round(Math.random() * 1000) },
                        { name: '安康市', value: Math.round(Math.random() * 1000) },
                        { name: '商洛市', value: Math.round(Math.random() * 1000) }
                    ]
                },
                {
                    name: '采购金额',
                    type: 'map',
                    mapType: '陕西',
                    selectedMode: 'single',
                    itemStyle: {
                        normal: { label: { show: true } },
                        emphasis: { label: { show: true } }
                    },
                    data: [
                        { name: '西安市', value: Math.round(Math.random() * 10000) },
                        { name: '铜川市', value: Math.round(Math.random() * 10000) },
                        { name: '宝鸡市', value: Math.round(Math.random() * 10000) },
                        { name: '咸阳市', value: Math.round(Math.random() * 10000) },
                        { name: '渭南市', value: Math.round(Math.random() * 10000) },
                        { name: '延安市', value: Math.round(Math.random() * 10000) },
                        { name: '汉中市', value: Math.round(Math.random() * 10000) },
                        { name: '榆林市', value: Math.round(Math.random() * 10000) },
                        { name: '安康市', value: Math.round(Math.random() * 10000) },
                        { name: '商洛市', value: Math.round(Math.random() * 10000) }
                    ]
                }
            ]
        };    
	
	    var shanxiChart = echarts.init(document.getElementById('shanxiChart'));
	    shanxiChart.setOption(option);
	</script>
	
</body>
</html>